<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>转让/移转申请/注册商标申请</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="转让人名称（中文）：" prop="transferee_ch_id">
            <el-input v-model="ruleForm.transferee_ch_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="受让人名称（中文）：" prop="transferor_ch_id">
            <el-input v-model="ruleForm.transferor_ch_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="外国受让人的国内接收人：">
            <el-input v-model="ruleForm.recipient"></el-input>
          </el-form-item>
          <el-form-item label="国内接收人地址：">
            <el-input v-model="ruleForm.dom_rec_addr"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码：">
            <el-input v-model="ruleForm.code_postal"></el-input>
          </el-form-item>
          <el-form-item label="商标申请号/注册号：" prop="app_code">
            <el-input v-model="ruleForm.app_code"></el-input>
          </el-form-item>
          <el-form-item label="是否共有商标：">
            <el-radio-group v-model="ruleForm.comm_status">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="subForm">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  name: "register",
  components: {
    BaseUpload
  },
  data() {
    return {
      ruleForm: {
        app_code: "",
        code_postal: "",
        comm_status: "0",
        confirmImgs: [],
        confirm_upload: "",
        docImgs: [],
        documentation: [],
        dom_rec_addr: "",
        recipient: "",
        transferee_ch_id: 1,
        transferor_ch_id: 1
      },
      rules: {
        transferee_ch_id: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        transferor_ch_id: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        app_code: [{ required: true, message: "字段不能为空", trigger: "blur" }]
      },
      formData: new FormData()
    };
  },
  methods: {
    // 获取数据
    getFile(data, data2) {
      console.log(data);
      console.log(data2);
      this.ruleForm.confirmImgs = data2;
      this.ruleForm.docImgs = data;
    },
    subForm() {
      var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.ruleForm.confirmImgs.forEach(itemone => {
        this.formData.append("confirmImgs", itemone);
      });
      this.ruleForm.docImgs.forEach(itemtwo => {
        this.formData.append("docImgs", itemtwo);
      });
      this.formData.append("app_code", this.ruleForm.app_code);
      this.formData.append("code_postal", this.ruleForm.code_postal);
      this.formData.append("comm_status", this.ruleForm.comm_status);
      this.formData.append("confirm_upload", this.ruleForm.confirm_upload);
      this.formData.append("documentation", this.ruleForm.documentation);
      this.formData.append("dom_rec_addr", this.ruleForm.dom_rec_addr);
      this.formData.append("recipient", this.ruleForm.recipient);
      this.formData.append("transferee_ch_id", this.ruleForm.transferee_ch_id);
      this.formData.append("transferor_ch_id", this.ruleForm.transferor_ch_id);

      this.$http
        .post(
          "http://192.168.0.102:8080/proTTransfer/update",
          this.formData,
          config
        )
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
}
</style>
